<template>
  <div style="text-align: left">
    <!-- <div>
      <button @click="printEditorHtml">print html</button>
      <button @click="insertTextHandler">insert text</button>
      <button @click="disableHandler">disable</button>
    </div> -->
    <div id="editor-out-box" style="border: 1px solid #dcdfe6; border-radius: 4px; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #dcdfe6; border-radius: 4px 4px 0 0"
        :editor="editor"
        :defaultConfig="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        style="height: 400px; overflow-y: hidden; border-radius: 4px"
        :defaultConfig="editorConfig"
        v-model="html"
        @onChange="onChange"
        @onCreated="onCreated"
      />
    </div>
    <!-- <div style="margin-top: 10px">
      <textarea v-model="html" readonly style="width: 100%; height: 200px; outline: none"></textarea>
    </div> -->
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  name: "HtmlEditor",
  components: { Editor, Toolbar },
  props: ["htmlValue"],
  data() {
    var that = this;
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
        excludeKeys: ["emotion", "insertVideo", "uploadVideo", "editVideoSize", "group-video", "uploadImage"],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        autoFocus: false,

        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          uploadImage: {
            server: "/api/upload",
            onBeforeUpload(file) {
              // file 选中的文件，格式如 { key: file }
              that.message.warning({ message: "暂不支持上传图片，请使用链接插入图片" });

              return false;

              // 可以 return
              // 1. return file 或者 new 一个 file ，接下来将上传
              // 2. return false ，不上传这个 file
            },
          },
        },
      },
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      //   console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      this.$emit("editorChange", editor);
    },
    msg(data) {
      this.$message(data);
    },
    // insertTextHandler() {
    //   const editor = this.editor;
    //   if (editor == null) return;
    //   editor.insertText(" hello ");
    // },
    // printEditorHtml() {
    //   const editor = this.editor;
    //   if (editor == null) return;
    //   console.log(editor.getHtml());
    // },
    // disableHandler() {
    //   const editor = this.editor;
    //   if (editor == null) return;
    //   editor.disable();
    // },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    //   this.html = this.htmlValue;
    // }, 100);
    console.log(this.editorConfig);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
  watch: {
    htmlValue: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.html = newVal;
      },
    },
  },
};
</script>
<style lang="scss" scoped>
#editor-out-box {
  z-index: 10000;
}
::v-deep .w-e-bar {
  border-radius: 4px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
